<template>
	<view class="chatAudio">
		<!-- 长按录音 -->
		<image v-if="type === 0 || type === 1" class="image"
			:src="type === 0 ? '/static/images/audio1.png': '/static/images/audio.gif'" mode="" @longpress="startRecord"
			@touchend="endRecord"></image>

		<!-- 录音完成 -->
		<image v-if="type === 2 || type === 3" class="image"
			:src="type === 2 ? '/static/images/audio1.png': '/static/images/audio.gif'" mode="" @click="playVoice">
		</image>

		<button class="button" v-if="type > 1" @click="clearAudio">清空录音</button>

	</view>
</template>
<script>
	// 录音管理
	const recorderManager = uni.getRecorderManager();
	// 创建audio对象
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true; // 是否自动播放

	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'


	export default {
		name: 'chatAudio',
		props: {
			/**
			 * 完成录音返回录音文件
			 */
			submit: {
				type: Function,
				default: () => {}
			},
			
			/**
			 * 显示的
			 */
			previewData:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
				// 录音的地址
				voicePath: '',
				
				// 上传后的地址
				formData: '',

				// 录音状态，0是未录音，1是正在录音，2是录音完成,3是播放录音,4是播放完成
				type: 0, // 
			}
		},
		
		watch:{
			previewData(){
				if(this.previewType){
					this.voicePath = this.previewData
					this.type = 2
					this.$emit('submit',this.voicePath)
				}
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			
			/**
			 * 是否有回显的东西
			 */
			previewType(){
				return this.previewData !== ''
			}
			
		},
		created() {

		},
		mounted() {
			let that = this;
			recorderManager.onStop(function(res) {
				console.log('录音停止', res);
				that.voicePath = res.tempFilePath;
				
				that.uploadFilePromise(that.voicePath)
			});

			innerAudioContext.onEnded(res => {
				console.log('播放结束', res);
				that.type = 2
			})
			
			
			innerAudioContext.onCanplay(res=>{
				console.log('进入播放黄台',res);
			})

		},


		methods: {
			
			
			

			/**
			 * 长按录音
			 */
			longpress() {
				// 开始录音
				this.startRecord()
				// 改变录音状态
				this.type = 1
			},




			/**
			 * 开始录音
			 */
			startRecord() {
				console.log('开始录音');
				this.type = 1
				recorderManager.start();
			},
			/**
			 * 关闭录音
			 */
			endRecord() {
				recorderManager.stop();
				this.type = 2
				console.log('录音结束', recorderManager);
			},
			/**
			 * 播放录音
			 */
			playVoice() {

				console.log('播放录音');

				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
					this.type = 3
				}
			},
			
			
			/**
			 * 清空录音
			 */
			clearAudio(){
				this.type = 0
				this.voicePath = ''
			},
			
			
			/**
			 * 上传
			 */
			async uploadFilePromise(url) {
				let data =	await new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.$baseURL + 'api' + '/user/uploadImg', // 上传接口
						filePath: url,
						name: 'file',
						header: {
							'Authorization': `Bearer ${this.userInfo.loginToken}`
						},
						formData: {},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
							}, 1000)
						},
						fail(err) {
							reject('错误')
						}
					});
				})
				
				this.formData = data
				this.$emit('submit',this.formData)
				
			},
		},
	}
</script>
<style lang="less" scoped>
	.chatAudio {
		#flex(-,-,center);
		.image {
			#box(200rpx);
		}
		.button{
			margin: 0 0 0 24rpx;
			#font(28rpx,#999);
			#padding(24rpx);
		}
	}
</style>